{% extends "PopshouseAdminBundle::layout.html.twig" %}
{% block title %}
Achtergronden Sorteren
{% endblock %}
{% block content %}

<div class="left side">
    {% include "PopshouseAdminBundle:Background:menu.html.twig"  %}
</div>
<div class="left content" style="width:670px">
<h2>Afbeeldingen sorteren</h2>

<img src="{{ asset('images/layout/loader.gif') }}" id="loader" style="display:none;" />

<div class="flash-notice" style="display:none;"></div>

<ol class="images" id="sortable">


   {% for image in images %}
    <li id="album_{{image.id}}">
    <img class="bg" src="{{ asset('images/photo/backgrounds/' ~ image.id ~ 't.jpg') }}" />
    </li>
    {% endfor %}


</ol>

<form id="sort" name="sort" enctype="application/x-www-form-urlencoded" method="post" action="#">
    <dl>
        <dt id="order-label">&nbsp;</dt>
        <dd id="order-element">
            <input type="hidden" name="order" value="" id="order" />
        </dd>
        <dt id="submit-label">&nbsp;</dt>
        <dd id="submit-element">
            <input type="submit" name="submit" id="submit" value="Opslaan" disabled="1" />
        </dd>
    </dl>
</form>  
</div>  
<div id="debug"></div>

{% endblock %}
{% block js %}
$.debug = {
    dump: function(arr, level) {
      var dumped_text = "";
      if(!level) level = 0;
      var level_padding = "";
      for(var j=0;j<level+1;j++) level_padding += "    ";
      if(typeof(arr) == 'object') { //Array/Hashes/Objects
       for(var item in arr) {
        var value = arr[item];
       
        if(typeof(value) == 'object') { //If it is an array,
         dumped_text += level_padding + "'" + item + "' ...\n";
         dumped_text += $.debug.dump(value,level+1);
        } else {
         dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
        }
       }
      } else { //Stings/Chars/Numbers etc.
       dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
      }
      return dumped_text;
    },
    print_r: function(obj, contId){
      $("#"+contId).removeClass().css({
        display: "block",
        position: "absolute",
        top: "0px",
        right: "0px",
        padding: "10px",
        width: "700px",
        height: "auto",
        background: "#ddd",
        color: "black",
        border: "solid 1px black"
      }).html("<pre>"+$.debug.dump(obj)+"</pre><div id='close-debug'>Close</div>");
      
      $("#close-debug").css({cursor: "pointer"}).click(function(){
        $("#"+contId).remove();
      });
    }
  };
  
        $("#sortable").sortable({
            change: function(){$("#submit").removeAttr("disabled");$(".flash-notice").fadeOut("normal");},
            stop: function(){
                $("#order").val($(this).sortable('serialize'));
            }
        });
        
        $("#sortable").disableSelection();
        var options = { 
            target:     '.success',
            dataType: 'json',
            format: 'json',
            beforeSubmit : function(){ $(".flash-notice").hide(); $("#loader").show(); },
            success:    function(data, textStatus) { 
                $("#loader").hide();
                $("#submit").attr("disabled","1");
                $(".flash-notice").html(data["message"]);
                $(".flash-notice").fadeIn("slow");
            },
            error:    function(data, textStatus) { 
                $("#loader").css("visibility","hidden");
                alert("Fout tijdens het opslaan");
                $.debug.print_r(data, "debug"); 
            } 
        }; 
        $('#sort').ajaxForm(options);
{% endblock %}